import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin, Modal, InputNumber, Input } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';

const { Description } = DescriptionList;
const FormItem = Form.Item;
@connect(({ loading, prodetailupdate }) => ({
  loading: loading.models.prodetailupdate,
  detailList: prodetailupdate.detailList,
  probDets: prodetailupdate.probDets,
}))
@Form.create()
class MaintainDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: null,
      wageOrderInfoId: null,
      modalShow: false,
      modifyMessage: null,
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  // 详情
  getDetail = () => {
    const { dispatch, location } = this.props;
    const { wageOrderInfoId, activeKey } = location.query;
    this.setState({
      activeKey,
      wageOrderInfoId,
    });
    dispatch({
      type: 'prodetailupdate/getDetailMessage',
      payload: { wageOrderInfoId },
    });
  };

  // 修改
  proupdate = (wageOrderInfoId, e) => {
    this.setState({
      modalShow: true,
      modifyMessage: e,
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'prodetailupdate/getDetailMessage',
      payload: { wageOrderInfoId },
    });
  };

  // 模态框显隐
  handleModalVisible = () => {
    const { form } = this.props;
    this.setState({
      modalShow: false,
    });
    form.resetFields([
      'incmAmo',
      'advAdjAmo',
      'pensAmo',
      'medAmo',
      'unempAmo',
      'accuAmo',
      'acumChildEduPay',
      'acumCntnuEduPay',
      'acumHousMortgPay',
      'acumHousRentPay',
      'acumSuptElderPay',
      'allowDdctblDon',
      'firmAnnui',
      'comAnnui',
      'defrPenAnnui',
      'otherDedu',
      'ddctblAmo',
      'aftAdjAmo',
      'taxblAmo',
      'realAmo',
      'mobile',
      'bankCardId',
      'accoHolderName',
      'provinceInfo',
      'remark',
    ]);
  };

  // 修改提交
  submitModalData = () => {
    const { form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      const temp = values;
      if (!err) {
        const { dispatch, detailList } = this.props;
        const { activeKey, wageOrderInfoId, modifyMessage } = this.state;
        temp.wageOrderInfoId = wageOrderInfoId;
        temp.incmType = detailList.incmType;
        if (String(activeKey) === '2') {
          temp.bankCardId = values.bankCardId;
          temp.mobile = values.mobile;
          temp.accoHolderName = values.accoHolderName;
          temp.provinceInfo = values.provinceInfo;
          delete temp.incmType;
        }
        if (String(modifyMessage) === '1') {
          dispatch({
            type: 'prodetailupdate/subUpdateMessage',
            payload: { params: temp },
            callback: res => {
              if (res.success) {
                this.setState({
                  modalShow: false,
                });
              }
              this.getDetail();
            },
          });
        } else {
          dispatch({
            type: 'prodetailupdate/subUpdateGrantMessage',
            payload: { params: values },
            callback: res => {
              if (res.success) {
                this.setState({
                  modalShow: false,
                });
              }
              this.getDetail();
            },
          });
        }
      }
    });
  };

  render() {
    const { loading, detailList, form, probDets } = this.props;
    const { getFieldDecorator } = form;
    const { activeKey, wageOrderInfoId, modalShow, modifyMessage } = this.state;
    const modalItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
    };
    return (
      <Spin spinning={loading} size="large">
        <PageHeaderWrapper>
          <Card title={<span style={{ fontWeight: 900 }}>基本信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="姓名">{detailList.empName || '--'}</Description>
                <Description term="证件号">{detailList.idCode || '--'}</Description>
                <Description term="客户">{detailList.custName || '--'}</Description>
                <Description term="签约方">{detailList.ordRecvName || '--'}</Description>
                <Description term="接单方">{detailList.ordSndrName || '--'}</Description>
                <Description term="所属客服">{detailList.primName || '--'}</Description>
                <Description term="操作时间">
                  {(detailList.operTime &&
                    moment(detailList.operTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card title={<span style={{ fontWeight: 900 }}>收入信息</span>}>
            {String(activeKey) === '1' ? (
              <Authorized authority="cs:wage:updateVind" noMatch={null}>
                <div style={{ position: 'absolute', right: 32, top: 18 }}>
                  <a onClick={() => this.proupdate(wageOrderInfoId, '1')}>修改</a>
                </div>
              </Authorized>
            ) : null}
            <Form>
              <DescriptionList>
                <Description term="收入年月">
                  {(detailList.busiYmDate && moment(detailList.busiYmDate).format('YYYY-MM')) ||
                    '--'}
                </Description>
                <Description term="收入类型">{detailList.incmTypeName || '--'}</Description>
                <Description term="收入金额">
                  {detailList.incmAmo === 0
                    ? 0
                    : (detailList.incmAmo && detailList.incmAmo) || '--'}
                </Description>
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="本期免税收入">
                    {(detailList.advAdjAmo && detailList.advAdjAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="养老个人">
                    {(detailList.pensAmo && detailList.pensAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="医疗个人">
                    {(detailList.medAmo && detailList.medAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="失业个人">
                    {(detailList.unempAmo && detailList.unempAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="公积金个人">
                    {(detailList.accuAmo && detailList.accuAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计子女教育支出">
                    {(detailList.acumChildEduPay && detailList.acumChildEduPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计继续教育支出">
                    {(detailList.acumCntnuEduPay && detailList.acumCntnuEduPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计住房贷款利息支出">
                    {(detailList.acumHousMortgPay && detailList.acumHousMortgPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计住房租金支出">
                    {(detailList.acumHousRentPay && detailList.acumHousRentPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计赡养老人支出">
                    {(detailList.acumSuptElderPay && detailList.acumSuptElderPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="企业（职业）年金">
                    {(detailList.firmAnnui && detailList.firmAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="商业健康保险">
                    {(detailList.comAnnui && detailList.comAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="税延养老保险">
                    {(detailList.defrPenAnnui && detailList.defrPenAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="其他抵扣">
                    {(detailList.otherDedu && detailList.otherDedu) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="准予扣除的捐赠额">
                    {(detailList.allowDdctblDon && detailList.allowDdctblDon) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="减免税额">
                    {(detailList.ddctblAmo && detailList.ddctblAmo) || '--'}
                  </Description>
                ) : null}
                <Description term="本月应缴税额">
                  {(detailList.taxblAmo && detailList.taxblAmo) || '--'}
                </Description>
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="税后扣款">
                    {(detailList.aftAdjAmo && detailList.aftAdjAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="补退税额（上月）">
                    {(detailList.agoRtnAmo && detailList.agoRtnAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="补退税额（本月）">
                    {(detailList.nowRtnAmo && detailList.nowRtnAmo) || '--'}
                  </Description>
                ) : null}
                <Description term="实发工资">
                  {(detailList.realAmo && detailList.realAmo) || '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card title={<span style={{ fontWeight: 900 }}>其他信息</span>}>
            {String(activeKey) === '1' || String(activeKey) === '2' ? (
              <Authorized authority="cs:wage:updateVind" noMatch={null}>
                <div style={{ position: 'absolute', right: 32, top: 18 }}>
                  <a onClick={() => this.proupdate(wageOrderInfoId, '2')}>修改</a>
                </div>
              </Authorized>
            ) : null}
            <Form>
              <DescriptionList>
                <Description term="发放地区">{detailList.wageCityName || '--'}</Description>
                <Description term="报税地区">{detailList.taxCityName || '--'}</Description>
                <Description term="发放日期">
                  {(detailList.wageDate && moment(detailList.wageDate).format('YYYY-MM-DD')) ||
                    '--'}
                </Description>
                <Description term="手机号码">{detailList.mobile || '--'}</Description>
                <Description term="银行账号">{detailList.bankCardId || '--'}</Description>
                <Description term="开户行">{detailList.accoHolderName || '--'}</Description>
                <Description term="省市信息">{detailList.provinceInfo || '--'}</Description>
                <Description term="备注">{detailList.remark || '--'}</Description>
              </DescriptionList>
            </Form>
          </Card>
          <ProRecording proRecording={probDets} />
          <FooterToolbar style={{ width: '100%' }}>
            <Button style={{ marginRight: 10 }} onClick={() => router.goBack()}>
              返回
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
        <Modal
          width={600}
          title="修改"
          visible={modalShow}
          loading={loading}
          onCancel={() => this.handleModalVisible(false)}
          destroyOnClose
          footer={[
            <Button onClick={() => this.handleModalVisible(false)}>取消</Button>,
            <Button type="primary" loading={loading} onClick={() => this.submitModalData()}>
              确定
            </Button>,
          ]}
        >
          <div>
            {String(modifyMessage) === '1' ? (
              <div>
                <FormItem {...modalItemLayout} label="收入金额">
                  {getFieldDecorator('incmAmo', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: (detailList.incmAmo && detailList.incmAmo) || null,
                  })(<InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="本期免税收入">
                    {getFieldDecorator('advAdjAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.advAdjAmo && detailList.advAdjAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="养老个人">
                    {getFieldDecorator('pensAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.pensAmo && detailList.pensAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="医疗个人">
                    {getFieldDecorator('medAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.medAmo && detailList.medAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="失业个人">
                    {getFieldDecorator('unempAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.unempAmo && detailList.unempAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="公积金个人">
                    {getFieldDecorator('accuAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.accuAmo && detailList.accuAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="累计子女教育支出">
                    {getFieldDecorator('acumChildEduPay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.acumChildEduPay && detailList.acumChildEduPay) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="累计继续教育支出">
                    {getFieldDecorator('acumCntnuEduPay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.acumCntnuEduPay && detailList.acumCntnuEduPay) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="累计住房贷款利息支出">
                    {getFieldDecorator('acumHousMortgPay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.acumHousMortgPay && detailList.acumHousMortgPay) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="累计住房租金支出">
                    {getFieldDecorator('acumHousRentPay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.acumHousRentPay && detailList.acumHousRentPay) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="累计赡养老人支出">
                    {getFieldDecorator('acumSuptElderPay', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.acumSuptElderPay && detailList.acumSuptElderPay) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="企业（职业）年金">
                    {getFieldDecorator('firmAnnui', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.firmAnnui && detailList.firmAnnui) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="商业健康保险">
                    {getFieldDecorator('comAnnui', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.comAnnui && detailList.comAnnui) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="税延养老保险">
                    {getFieldDecorator('defrPenAnnui', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.defrPenAnnui && detailList.defrPenAnnui) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="其他抵扣">
                    {getFieldDecorator('otherDedu', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.otherDedu && detailList.otherDedu) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="准予扣除的捐赠额">
                    {getFieldDecorator('allowDdctblDon', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue:
                        (detailList.allowDdctblDon && detailList.allowDdctblDon) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="减免税额">
                    {getFieldDecorator('ddctblAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.ddctblAmo && detailList.ddctblAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                {detailList.incmType === 1 ? (
                  <FormItem {...modalItemLayout} label="税后扣款">
                    {getFieldDecorator('aftAdjAmo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: (detailList.aftAdjAmo && detailList.aftAdjAmo) || null,
                    })(
                      <InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />
                    )}
                  </FormItem>
                ) : null}
                <FormItem {...modalItemLayout} label="本月应缴税额">
                  {getFieldDecorator('taxblAmo', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: (detailList.taxblAmo && detailList.taxblAmo) || null,
                  })(<InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...modalItemLayout} label="实发金额">
                  {getFieldDecorator('realAmo', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: (detailList.realAmo && detailList.realAmo) || null,
                  })(<InputNumber precision={2} style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
              </div>
            ) : (
              <div>
                <FormItem {...modalItemLayout} label="手机号码">
                  {getFieldDecorator('mobile', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.mobile || null,
                  })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...modalItemLayout} label="银行账号">
                  {getFieldDecorator('bankCardId', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.bankCardId || null,
                  })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...modalItemLayout} label="开户行">
                  {getFieldDecorator('accoHolderName', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.accoHolderName || null,
                  })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...modalItemLayout} label="省市信息">
                  {getFieldDecorator('provinceInfo', {
                    rules: [{ required: false, message: '请输入' }],
                    initialValue: detailList.provinceInfo || null,
                  })(<Input style={{ width: '100%' }} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...modalItemLayout} label="备注">
                  {getFieldDecorator('remark', {
                    rules: [{ required: false, message: '请输入' }],
                    initialValue: detailList.remark || null,
                  })(<Input style={{ width: '100%' }} placeholder="请输入备注内容" />)}
                </FormItem>
              </div>
            )}
          </div>
        </Modal>
      </Spin>
    );
  }
}

export default MaintainDetail;
